<template>
	<!-- 忘记交易密码 -->
	<view>
		<nav-bar leftIcon="left"></nav-bar>
		<view style="padding: 274rpx 30rpx 0 30rpx; width: 100vw;height: 90vh;margin: 0;box-sizing: border-box;"
			class="content1">
			<text class="text">{{ $t('忘記密碼') }}</text>
			<text class="text1">{{ $t('爲確保您的賬戶安全，在您更改密碼後，提現、C2C出售、支付 服務和幣安卡應用等功能將玻禁用24小時。') }}</text>
			<view class="old" style="margin-top: 0;">
				<input maxlength="6" @input="newIpt" class="old-ipt" v-model="newpassword" :type="isShow"
					:placeholder="$t('請輸入新密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow === 'text'" src="@/assets/login/zy.png"
						class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view class="old">
				<input maxlength="6" @input="oldIpt" class="old-ipt" v-model="againpassword" :type="isShow"
					:placeholder="$t('請確認密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow === 'text'" src="@/assets/login/zy.png"
						class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view class="old">
				<input class="old-ipt" v-model="code" type="number" :placeholder="$t('請輸入驗證碼')">
				<view>
					<text @click="throttle2GetAuthCode" v-if="!iscountDown"
						style="font-size: 20rpx;color: #FFFFFF;margin-right: 14rpx;">{{ $t('獲取驗證碼') }}</text>
					<text v-else style="font-size: 21rpx;color: #FFFFFF;margin-right: 14rpx;">{{ countDownNum }}</text>
				</view>
			</view>
			<view @click="ForgetPayPassword" class="submit">
				{{ $t('确认') }}
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
const isShow = ref('password')
const newpassword = ref('')
const againpassword = ref('')
const code = ref('')
const countDownNum = ref(60)
const iscountDown = ref(false)
import api from '@/hooks/safety.js'
import i18n from '@/locale/index'
const { ForgetPayPasswordApi, getCode } = api()
import { axios, socketUrl, axiosLogin } from '@/service/request.js'

function newIpt(val) {
	nextTick(() => {
		newpassword.value = val.detail.value.replace(/\D/g, '')
		if (newpassword.value !== val.detail.value) {
			uni.showToast({
				title: `${i18n.global.t('只能輸入數字')}`,
				icon: 'none',
			})
		}
	})
}

function oldIpt(val) {
	nextTick(() => {
		againpassword.value = val.detail.value.replace(/\D/g, '')
		if (againpassword.value !== val.detail.value) {
			uni.showToast({
				title: `${i18n.global.t('只能輸入數字')}`,
				icon: 'none',
			})
		}
	})
}

//修改input密码状态
function cutType(val) {
	isShow.value = val
}

//倒计时
let a = true
const throttle2GetAuthCode = async () => {
	if (a) {
		a = false
		iscountDown.value = true
		let timer = setInterval(() => {
			countDownNum.value--
			if (countDownNum.value === 0) {
				clearInterval(timer)
				iscountDown.value = false
				countDownNum.value = 60
			}
		}, 1000)		
		if (uni.getStorageSync('setUserInfo').email) {
			setTimeout(() => {
				a = true
			}, 5000)
			await axiosLogin('/user/sendVerificationCode', {
				email: uni.getStorageSync('setUserInfo').email,
				checksType: 2
			})
			a = true
		} else {
			setTimeout(() => {
				a = true
			}, 5000)
			await axiosLogin('/user/sendPhoneVerificationCode', {
				phone: uni.getStorageSync('setUserInfo').phone,
				checksType: 2
			})
		}

		uni.showToast({
			title: `${i18n.global.t('發送成功')}`,
			icon: 'none',
		})
	}

};


async function ForgetPayPassword() {
	if (!newpassword.value || !againpassword.value) return uni.showToast({
		title: `${i18n.global.t('請完善信息')}`,
		icon: 'none',
	})
	if (newpassword.value.length < 6) return uni.showToast({
		title: `${i18n.global.t('交易密碼應爲6位')}`,
		icon: 'none',
	})
	if (newpassword.value !== againpassword.value) return uni.showToast({
		title: `${i18n.global.t('密碼不一致')}`,
		icon: 'none',
	})
	await ForgetPayPasswordApi('/user/getPayPasswordForget', {
		userId: uni.getStorageSync('setUserInfo').userId,
		payPassword: newpassword.value,
		verifyCode: code.value
	})
	uni.showToast({
		title: `${i18n.global.t('修改成功！')}`,
		icon: 'none',
	})
	uni.switchTab({
		url: '/pages/my/my'
	})
}
</script>

<style lang="scss" scoped>
.text {
	display: block;
	font-size: 42rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 9rpx;
}

.text1 {
	display: block;
	font-size: 24rpx;
	font-weight: 300;
	color: #848686;
	line-height: 38rpx;
	margin-top: 40rpx;
	margin-bottom: 50rpx;
}

.inpIcon {
	width: 35rpx;
	height: 30rpx;
	margin-left: 15rpx;
}

.submit {
	width: 690rpx;
	height: 90rpx;
	background: linear-gradient(90deg, #039BDA, #0DF2ED);
	border-radius: 45rpx;
	margin-top: 57rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 90rpx;
	text-align: center;
}

.old {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 690rpx;
	height: 100rpx;
	background: #071A22;
	border-radius: 15rpx;
	padding: 0 25rpx;
	color: #FFFFFF;
	margin-top: 57rpx;

	.old-ipt {
		width: 70%;
		font-size: 27rpx;
	}
}
</style>